<template>
    <div>
        <div v-for="item in list" :key="item.id" class="item">
            <img :src="item.src" alt="">
            <p>{{ item.name }}</p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    setup() {
        const list = reactive([{ id: "01", name: "时令水果", src: require("../../../public/image/时令水果.png") },
        { id: "02", name: "新鲜蔬菜", src: require("../../../public/image//新鲜蔬菜.png") },
        { id: "03", name: "海鲜水产", src: require("../../../public/image/海鲜水产.png") },
        { id: "04", name: "肉禽蛋品", src: require("../../../public/image/肉禽蛋品.png") },
        { id: "05", name: "食品干货", src: require("../../../public/image/食品干货.png") },
        { id: "06", name: "美妆个护", src: require("../../../public/image/美妆个护.png") },
        { id: "07", name: "母婴百货", src: require("../../../public/image/母婴百货.png") },
        { id: "08", name: "保健滋补", src: require("../../../public/image/保健滋补.png") },
        { id: "09", name: "中外名酒", src: require("../../../public/image/中外名酒.png") },
        { id: "10", name: "彩妆时装", src: require("../../../public/image/彩妆时尚.png") },
        ])

        return {
            list
        }
    }
})
</script>

<style scoped lang="scss">
div {
    margin-top: 10px;
    width: 94%;
    height: 150px;
    margin-left: 3%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 10px;

    .item {
        width: 15%;
        height: 30px;
        p {
            font-size: 12px;
        }

        img {
            width: 45px;
        }
    }
}
</style>